<template>
	<view class="pet-swipe">
		<view class="swipe-container">
			<view v-for="(pet, index) in visiblePets" :key="pet.id" class="pet-card" :class="{ 
					'is-top': index === 0,
					'is-next': index === 1,
					'swipe-left': pet.direction === 'left',
					'swipe-right': pet.direction === 'right'
				}" :style="index === 0 ? getCardStyle(pet) : getNextCardStyle()" @touchstart.prevent="onTouchStart($event)"
				@touchmove.prevent="onTouchMove($event)" @touchend.prevent="onTouchEnd()">
				<view class="pet-image">
					<image :src="pet.image" mode=""></image>
				</view>
				<view class="pet-info">
					<h2>{{ pet.name }}</h2>
					<view class="pet-details">
						<span>{{ pet.breed }}</span>
						<span>{{ pet.age }}岁</span>
						<span>{{ pet.location }}</span>
					</view>
					<p class="pet-description">{{ pet.description }}</p>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="dislike-btn" @click="swipeLeft">
				<image src="/static/images/dislike-btn.png" mode=""></image>
			</view>
			<view class="camera-btn" @click="swipeCenter">
				<image src="/static/images/camera-btn.png" mode=""></image>
			</view>
			<view class="like-btn" @click="swipeRight">
				<image src="/static/images/like-btn.png" mode=""></image>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	const currentIndex = ref(0)
	const touchStart = ref({
		x: 0,
		y: 0
	})
	const isDragging = ref(false)

	const pets = ref([{
			id: 1,
			name: '球球',
			breed: '金毛',
			age: 2,
			location: '上海',
			description: '活泼可爱的金毛，非常喜欢和人互动',
			image: '/static/images/dog.png',
			x: 0,
			y: 0,
			direction: null
		},
		{
			id: 2,
			name: '鸡腿子',
			breed: '缅因',
			age: 1,
			location: '上海',
			description: '活泼可爱的小猫',
			image: '/static/images/cat.png',
			x: 0,
			y: 0,
			direction: null
		},
		{
			id: 3,
			name: '球球',
			breed: '金毛',
			age: 2,
			location: '上海',
			description: '活泼可爱的金毛，非常喜欢和人互动',
			image: '/static/images/dog.png',
			x: 0,
			y: 0,
			direction: null
		},
		// ... 更多宠物数据
	])

	// 计算当前可见的两张卡片
	const visiblePets = computed(() => {
		return pets.value.slice(currentIndex.value, currentIndex.value + 2)
	})

	const getCurrentPet = () => {
		return pets.value[currentIndex.value]
	}

	const getCardStyle = (pet) => {
		if (!isDragging.value && !pet.direction) return {
			transform: 'translateX(-50%)'
		}
		const rotate = pet.x * 0.1
		const scale = 1
		return {
			transform: `translateX(calc(-50% + ${pet.x}px)) translateY(${pet.y}px) rotate(${rotate}deg) scale(${scale})`,
			transition: isDragging.value ? 'none' : 'transform 0.3s ease'
		}
	}

	// 下一张卡片的样式
	const getNextCardStyle = () => {
		return {
			transform: 'translateX(-50%) scale(0.95) translateY(20px)',
			transition: 'transform 0.3s ease'
		}
	}

	const onTouchStart = (event) => {
		isDragging.value = true
		touchStart.value = {
			x: event.touches[0].clientX,
			y: event.touches[0].clientY
		}
		const currentPet = getCurrentPet()
		currentPet.direction = null
	}

	const onTouchMove = (event) => {
		if (!isDragging.value) return

		const currentPet = getCurrentPet()
		const deltaX = event.touches[0].clientX - touchStart.value.x
		const deltaY = event.touches[0].clientY - touchStart.value.y

		currentPet.x = deltaX
		currentPet.y = deltaY
	}

	const onTouchEnd = () => {
		if (!isDragging.value) return

		const currentPet = getCurrentPet()
		if (Math.abs(currentPet.x) > 100) {
			// 滑动距离足够大，触发喜欢/不喜欢
			currentPet.direction = currentPet.x > 0 ? 'right' : 'left'
			setTimeout(() => {
				if (currentIndex.value < pets.value.length - 1) {
					currentIndex.value++
				}
				resetCard(currentPet)
			}, 300)
		} else {
			// 回到原位
			resetCard(currentPet)
		}

		isDragging.value = false
	}

	const resetCard = (pet) => {
		pet.x = 0
		pet.y = 0
		pet.direction = null
	}

	const swipeLeft = () => {
		if (currentIndex.value >= pets.value.length - 1) return
		const currentPet = pets.value[currentIndex.value]
		currentPet.direction = 'left'
		currentPet.x = -100 // 减小滑动距离，保持居中效果
		setTimeout(() => {
			currentIndex.value++
			resetCard(currentPet)
		}, 300)
	}

	const swipeRight = () => {
		if (currentIndex.value >= pets.value.length - 1) return
		const currentPet = pets.value[currentIndex.value]
		currentPet.direction = 'right'
		currentPet.x = 100 // 减小滑动距离，保持居中效果
		setTimeout(() => {
			currentIndex.value++
			resetCard(currentPet)
		}, 300)
	}
</script>

<style scoped>
	.pet-swipe {
		/* position: relative; */
		background: var(--color-secondary);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.swipe-container {
		width: 100%;
		max-width: 360px;
		height: 70vh;
		position: relative;
		perspective: 1000px;
	}

	.pet-card {
		position: absolute;
		width: 660rpx;
		height: 1044rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background: #FFFFFF;
		box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		will-change: transform;
		touch-action: none;
		transform-origin: 50% 100%;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.pet-card.is-top {
		z-index: 2;
		opacity: 1;
	}

	.pet-card.is-next {
		z-index: 1;
		transform: translateX(-50%) scale(0.95) translateY(20px);
		pointer-events: none;
		opacity: 0;
	}

	.pet-card.is-top[style*="transform"]+.pet-card.is-next {
		opacity: 1;
	}

	/* 添加卡片阴影效果 */
	.pet-card::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		pointer-events: none;
		/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.15) 100%); */
	}

	.pet-image {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.pet-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.pet-info {
		width: 660rpx;
		height: 236rpx;
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
	}

	.pet-info h2 {
		font-size: 40rpx;
		font-weight: 600;
		margin-bottom: 16rpx;
		color: #333333;
	}

	.pet-details {
		display: flex;
		gap: 24rpx;
		margin-bottom: 16rpx;
	}

	.pet-details span {
		font-size: 28rpx;
		color: #666666;
	}

	.pet-description {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.4;
	}

	.action-buttons {
		position: fixed;
		bottom: 10rpx;
		/* margin-top: 20px; */
		display: flex;
		gap: 20px;
	}

	.action-buttons image {
		overflow: hidden;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.action-buttons button:active {
		transform: scale(0.95);
	}

	/* .dislike-btn {
		background: #FFF0F0;
		color: white;
	}

	.like-btn {
		background: #FFF0F0;
		color: white;
	}

	.camera-btn {
		background: #F0F0FF;
		color: white;
	} */

	.swipe-left {
		animation: swipeLeft 0.3s ease-out forwards;
	}

	.swipe-right {
		animation: swipeRight 0.3s ease-out forwards;
	}

	@keyframes swipeLeft {
		to {
			transform: translateX(-50%) translateY(100px) rotate(-20deg);
			opacity: 0;
		}
	}

	@keyframes swipeRight {
		to {
			transform: translateX(-50%) translateY(100px) rotate(20deg);
			opacity: 0;
		}
	}
</style>